<template lang="html">
  <div class="nav">
    <div class="nav_nav">
      <div @click="click1()" class="city">
        <div  class="city_data">
          {{ pro }}
        </div>
        <i class="el-icon-arrow-down"></i>
      </div>
      <div @click="click2()" class="area">
        <div  class="area_data">
          {{ pro1 }}
        </div>
        <i  class="el-icon-arrow-down"></i>
      </div>
      <div @click="click3()" class="nav_paixu">
        <div class="paixu_data">
          按距离排序
        </div>
        <i class="el-icon-caret-bottom"></i>
      </div>
    </div>
    <div v-show="isshow" class="city_show">
      <div class="show_left">
        <ul>
          <li class="show_left_li" @click="isClick(item)" v-for="(item,index) in city">{{ item[1] }}</li>
        </ul>
      </div>
      <div class="show_you">
          <ul>
            <li class="show_right_li" @click="isClicked(items)" v-for="items in zoneData">{{ items[1] }}</li>
          </ul>
      </div>
    </div>
    <div v-show="sho" class="city_show">
        <ul>
          <li  @click="isClickeds(item1)" class="show_aa" v-for="item1 in quyu">{{item1[2]}}</li>
        </ul>
    </div>
  </div>
</template>

<script>
import bus from '../js/bus'
export default {
  data(){
    return{
      city:[
          ["0","不限"],
          ["1", "北京市"],
          ["2", "上海市"],
          ["3", "广东省"],
          ["4", "天津市"],
          ["5", "吉林省"],
          ["6", "江苏省"],
          ["7", "黑龙江"],
          ["8", "浙江省"],
          ["9", "新疆"],
          ["10", "重庆市"],
          ["11", "河北省"],
          ["12", "福建省"],
          ["13", "广西省"],
          ["14", "四川省"],
          ["15", "湖南省"],
          ["16", "河南省"],
          ["17", "湖北省"],
          ["18", "云南省"],
          ["19", "陕西省"],
          ["20", "辽宁省"],
          ["21", "山西省"],
          ["22", "青海省"],
          ["23", "山东省"]
      ],
      pro:'不限',
      isshow:false,
      sho:false,
      zone:[
            [
                ["000", "不限"]
            ],
            [
                ["001", "北京"]
            ],
            [
                ["002", "上海"]
            ],
            [
                ["003", "深圳"],
                ["004", "广州"]
            ],
            [
                ["005", "天津市"]
            ],
            [
                ["006", "长春"],
                ["007", "松原"],
                ["008", "吉林"]
            ],
            [
                ["009", "常州"],
                ["010", "无锡"],
                ["011", "苏州"],
                ["012", "南京"]
            ],
            [
                ["013", "牡丹江"],
                ["014", "大庆"],
                ["015", "哈尔滨"]
            ],
            [
                ["016", "绍兴"],
                ["017", "湖州"],
                ["018", "嘉兴"],
                ["019","杭州"]
            ],
            [
                ["020", "乌鲁木齐"]
            ]
          ],
        proId:0,
        zoneData:[],
        pro1:'全部区域',
        quyu:[
            [1, 0, "不限"],
            [1, 0, "石景山区"],
            [1, 0, "大庆区"],
            [1, 0, "西城区"],
            [1, 0, "平谷区"],
            [1, 0, "通州区"],
            [1, 0, "顺义区"],
            [1, 0, "昌平区"],
            [1, 0, "海淀区"],
            [1, 0, "房山区"],
          ],
    }
  },methods:{
    isClick(n){

      // this.pro = n[1];
      this.proId = n[0];
      console.log(n[0]);
      let s = parseInt(this.proId)
      console.log(this.zone[s]);
      this.zoneData = this.zone[s];

    },
    isClicked(n){
      this.pro = n[1];
      this.isshow=false;

    },
    isClickeds(n){
      console.log(n[2]);
      this.pro1 = n[2];
      this.sho=false;
      this.axios.get('http://txspring.cn:8080/getSj').then(data => {
          // 把请求到的数据交给该实例的属性
          // this.result = data.data.data.storeList;
          console.log(data.data.data.storeList);
          bus.$emit('navzhi',[data.data.data.storeList,2]);
      })

    },
    click1(){
      this.isshow=!this.isshow;
      this.sho=false;
      this.axios.get('http://txspring.cn:8080/getBj').then(data => {
          // 把请求到的数据交给该实例的属性
          // this.result = data.data.data.storeList;
          console.log(data.data.data.storeList);
          bus.$emit('navzhi0',[data.data.data.storeList,1]);
      })
    },
    click2(){
      this.isshow=false;
      this.sho=!this.sho;
    },
    click3(){
      this.sho=false;
      this.isshow=false;
      this.axios.get('http://txspring.cn:8080/getPx').then(data => {
          // 把请求到的数据交给该实例的属性
          // this.result = data.data.data.storeList;
          console.log(data.data.data.storeList);
          bus.$emit('navzhi2',[data.data.data.storeList,3]);
      })
    }
  }
}
</script>

<style lang="css" scoped>
.nav .nav_nav{
  display: flex;
  justify-content: space-around;
  height: 3.2rem;
  border-top: .1px solid #ccc;
  border-bottom: .1px solid #ccc;
  margin: .7rem 0;
}
.city,.area,.nav_paixu{
  width: 25%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav .city_show{
  height: 15rem;
  width: 100%;
  position: absolute;
  background-color: white;
}
.show_left{
  float: left;
  width: 30%;
  height: 100%;
  border-right: .1px solid #ccc;
  overflow: scroll;
  line-height: 2.5rem;
}
.show_you{
  float: left;
  width: 70%;
  height: 100%;
  overflow: scroll;
  line-height: 2.5rem;
}
.show_left_li:hover{
  background-color: #00b0ec;
  color:#fff;
}
.show_right_li:hover{
  color:#adc;
}
.city_show{
  line-height: 2.5rem;
  text-align: left;
  overflow:scroll;
  padding-left: 1.4rem;
}
/*.city_show li{
  border-bottom: .1px solid #adc;
}*/
</style>
